<h3>{{ title() | translate }}</h3>

@if (isLoading()) {
  <div class="app-list-item">
    <ngx-skeleton-loader></ngx-skeleton-loader>
  </div>
} @else if (jsonDetails()?.length) {
  @for (item of jsonDetails(); track item) {
    <div class="app-list-wrapper">
      @for(key of getKeys(item); track key) {
        <div class="app-list-item">
          <span class="label">{{ getHumanReadableKey(key) | translate }}:</span>
          <div>{{ getValueByKey(item, key) | translate }}</div>
        </div>
      }
    </div>
  }
} @else {
  <div class="app-list-item">
    {{ 'N/A' | translate }}
  </div>
}
